<!-- input输入组件 -->
<template>
	<u-input
		v-if="['text','password','textarea'].indexOf(type) > -1"
		ref="input"
		:type="type"
		:value="valueCom"
		:modelValue="valueCom"
		:placeholder="placeholder"
		:clearable="clearable"
		:disabled="disabled"
		:height="height"
		:input-align="inputAlign"
		:placeholder-style="placeholderStyle"
		:confirm-type="confirmType"
		:custom-style="customStyle"
		:focus="focus"
		:border="border"
		:cursor-spacing="cursorSpacing"
		:selection-start="selectionStart"
		:selection-end="selectionEnd"
		:trim="trim"
		:fixed="fixed"
		:password-icon="passwordIcon"
		:maxlength="maxlength"
		@input="onInput"
		@focus="onFocus"
		@blur="onBlur"
		@confirm="onConfirm"
		@clear="onClear"
	></u-input>
	<vk-data-input-number
		v-else-if="['number','money','percentage','discount'].indexOf(type) > -1"
		:value="valueCom"
		:modelValue="valueCom"
		:type="type"
		:placeholder="placeholder"
		:clearable="clearable"
		:disabled="disabled"
		:height="height"
		:input-align="inputAlign"
		:placeholder-style="placeholderStyle"
		:confirm-type="confirmType"
		:custom-style="customStyle"
		:focus="focus"
		:border="border"
		:cursor-spacing="cursorSpacing"
		:selection-start="selectionStart"
		:selection-end="selectionEnd"
		:trim="trim"
		:precision="precision"
		:min="min"
		:max="max"
		@input="onInput"
		@focus="onFocus"
		@blur="onBlur"
		@confirm="onConfirm"
		@clear="onClear"
	></vk-data-input-number>
</template>
<script>
export default {
	name: "vk-data-input",
	emits: ["update:modelValue", "input", "blur", "focus", "confirm", "clear","change"],
	props: {
		// 值
		value: {},
		modelValue: {},
		// 输入框的类型，text，textarea，password，number，money，percentage，discount 
		type: {
			type: String,
			default: "text"
		},
		// 提示
		placeholder: {
			type: String,
			default: "请输入内容"
		},
		// 小数点位数
		precision: {
			type: [String,Number],
			default: 2
		},
		// 最大值
		max: {
			type: [String,Number]
		},
		// 最小值
		min: {
			type: [String,Number]
		},
		// 是否禁用
		disabled: {
			Type: Boolean
		},
		// 是否开启一键清空功能
		clearable: {
			Type: [Boolean, String],
			default: false
		},
		// 输入框文字的对齐方式
		inputAlign: {
			type: String
		},
		// 高度，单位rpx
		height: {
			Type: [String, Number]
		},
		// 提示的样式
		placeholderStyle: {
			type: String,
			default: "color:#c0c4cc"
		},
		// 设置键盘右下角按钮的文字，仅在type为text时生效
		confirmType: {
			type: String,
			default: "done"
		},
		// 输入框的自定义样式
		customStyle: {
			type: Object
		},
		// 是否显示边框
		border: {
			Type: Boolean,
			default: false
		},
		borderColor: {
			Type: String,
			default: "#dcdfe6"
		},
		// 指定光标与键盘的距离，单位 px
		cursorSpacing: {
			Type: [Number, String],
			default: 0
		},
		// 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
		selectionStart: {
			Type: [Number, String]
		},
		// 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
		selectionEnd: {
			Type: [Number, String]
		},
		// 是否自动去除两端的空格
		trim: {
			Type: Boolean,
			default: true
		},
		// 字符串相关字段
		// 字符串最大位数
		maxlength: {
			type: [Number, String],
			default: 140
		},
		// 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
		fixed: {
			type: Boolean,
			default: false
		},
		// 是否自动获得焦点
		focus: {
			type: Boolean,
			default: false
		},
		// 密码类型时，是否显示右侧的密码图标
		passwordIcon: {
			type: Boolean,
			default: true
		},
		autoHeight: {
			type: Boolean,
			default: true
		},
		// 是否显示键盘上方带有”完成“按钮那一栏
		showConfirmbar: {
			type: Boolean,
			default: true
		}
		
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			inputVal: ""
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
			
		},
		// 向父组件发送更新value事件
		_updateValue(value) {
			this.$emit("input", value);
			this.$emit("update:modelValue", value);
			this.$emit("change", value);
		},
		onInput(value){
			this._updateValue(value);
		},
		onFocus(){
			this.$emit("focus", this.valueCom)
		},
		onBlur(){
			this.$emit("blur", this.valueCom)
		},
		onConfirm(){
			this.$emit("confirm", this.valueCom)
		},
		onClear(){
			this.$emit("clear")
		},
	},
	watch: {

	},
	// 计算属性
	computed: {
		valueCom() {
			// #ifndef VUE3
			return this.value;
			// #endif
		
			// #ifdef VUE3
			return this.modelValue;
			// #endif
		}
	}
};
</script>

<style lang="scss" scoped>
	
</style>
